<template>
	<div class="main">
		<div class="meet-info">
			<div :style="{backgroundImage: `url(${meetingInfo.coverImg})`}" class="cover"></div>
			<div class="info">
        <p class="title">{{meetingInfo.meetingName}}</p>
        <p class="time">{{meetingInfo.meetingTime}}</p>
        <p class="address">{{meetingInfo.address}}</p>
      </div>
		</div>
		<div class="apply">
      <div class="title-more">
        <span class="header-title">{{meetingInfo.ticketType ? '收费': '免费'}}报名</span>
      </div>
      <div class="apply-info">
        <div class="info">
          <p class="type">{{meetingInfo.ticketType ? '收费': '免费'}}</p>
          <p @click="replaceTo('meetingApplyConfirm',{}, {meetingId: meetingId})" class="btn">报名</p>
        </div>
      </div>
      <div class="rule">
        <p>单次最少需购买1张，最多可购买10张</p>
        <p>每人最多可购买10张</p>
      </div>
    </div>
	</div>
</template>
<script>
export default {
  name: 'Apply',
  data () {
    return {
      meetingId: this.$route.query.meetingId || '',
      meetingInfo: {}
    }
  },
  methods: {
    // 获取会议详情
    fetchMeetingInfo () {
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/offline/${this.meetingId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.meetingInfo = data
          }
        }
      })
    }
  },
  created () {
    this.fetchMeetingInfo()
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  height 100vh
  background rgb(249,250,251)
  /* 公共样式 */
  .title-more
    display flex
    justify-content space-between
    box-sizing border-box
    padding 0 15px
    align-items center
    .header-title
      display block
      color #202125
      font-size 14px
      font-weight 700
      flex 1
      width 0
      line-height 20px
      padding-left 18px
      nowrap()
      background url('~assets/img/title-icon-blue.png') no-repeat left 0 center / auto 14px
    .more-title
      flex-shrink 0
      color rgba(14, 191, 178, 1)
      font-size 14px
      line-height 20px
      font-weight 700
  .meet-info
    width 100%
    background #fff
    padding 15px
    display flex
    .cover
      width 70px
      height 70px
      background-size cover
      background-position center
      background-repeat no-repeat
      border-radius 6px
    .info
      width calc(100% - 80px)
      margin-left 10px
      .title
        max-height 42px
        line-height 21px
        font-size 17px
        color #464646
      .time, .address
        height 18px
        line-height 18px
        font-size 13px
        color #848484
        margin-top 8px
  .apply
    width 100%
    background #fff
    padding-top 20px
    margin-top 10px
    .apply-info
      width 100%
      padding 0 15px
      .info
        width 100%
        height 76px
        display flex
        justify-content space-between
        align-items center
        border-bottom 1px solid #f5f5f5
        .type
          font-size 15px
          color #0EBFB2
        .btn
          width 100px
          height 30px
          background #3DB5FF
          line-height 30px
          text-align center
          font-size 15px
          color #ffffff
          border-radius 15px
    .rule
      width 100%
      padding 17px 15px
      p
        width 100%
        line-height 21px
        font-size 15px
        color #464646
        padding-left 18px
        position relative
        &:last-of-type
          margin-top 10px
        &::before
          content ''
          display block
          width 8px
          height 8px
          background #3DB5FF
          border-radius 50%
          position absolute
          top 50%
          left 0
          transform translate(0, -50%)
</style>
